<template>
  <div class="w-full h-[64px] flex justify-between items-center pr-10">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3 title-a">历史版本</span>
      </div>
    </div>
    <div class="flex-1"></div>
  </div>
  <div class="w-full px-12">
    <a-from :model="form" class="title">
      <a-form-item field="name" label="资产包名称:">{{ tableDate.name }}</a-form-item>
      <a-form-item field="name" label="资源编号:"> {{ tableDate.code }}</a-form-item>
    </a-from>
  </div>
  <div class="w-full px-12">
    <div class="w-full h-[500px] bg-white">
      <a-table :columns="columns" :data="tableDate.versions" :pagination="false">
        <template #handle="{ record }">
          <a-button @click="handleSee(record)">查看</a-button>
        </template>
      </a-table>
    </div>
    <div class="w-full flex justify-between">
      <div></div>
      <div class="mr-5"></div>
    </div>
  </div>
  <div class="fotter flex items-center justify-between">
    <div class=""></div>
    <div class="mr-10">
      <a-space>
        <a-button type="primary" @click="callBack">关闭</a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const form = ref({
  name: ''
});
/**
 * @method 标题返回
 */
const goBack = () => {
  window.history.go(-1);
};
/**
 * @method 顶部标题
 */
const titleName = computed(() => {
  return route.name;
});
/**
 * @method 表格数据
 */
import usetable from '../use_hooks/usebanben';

const { columns, data } = usetable();
/**
 * @method 表格分页
 */
interface DisplayDataType {}
interface PaginationType {
  displayData: DisplayDataType[];
  currentPage: number;
  pageSize: number;
}
const pagination = ref<PaginationType>({
  displayData: [], // 当前显示的数据
  currentPage: 1, // 当前页码
  pageSize: 10 // 每页显示条目数
});
const handleChange = (page: number) => {
  pagination.value.currentPage = page;
  const startIndex = (page - 1) * pagination.value.pageSize;
  const endIndex = startIndex + pagination.value.pageSize;
  pagination.value.displayData = data.slice(startIndex, endIndex);
};
handleChange(1);
/**
 * @method 查看
 */
const handleSee = (record) => {
  router.push({ name: '查看详情', query: { id: record.id } });
};

/**
 * @method 取消
 */
const callBack = () => {
  router.push({ name: '资产管理' });
};
/**
 * @method 初始化
 */

let tableDate: any = ref([]);
import * as api from '@/api/pack/pack';
const getBanben = async () => {
  const code = route.query.code as string;
  const obj = {
    code: code,
    page: 1,
    page_size: 30
  };
  const res = await api.getBanben(obj);
  console.log(res);
  tableDate.value = res.data;
  console.log(tableDate);
};
onMounted(() => {
  getBanben();
});
</script>

<style lang="less" scoped>
// 顶部标题样式
.title-a {
  font-family: Microsoft YaHei;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: 0em;
  color: #394d73;
}
.title {
  height: 60px;
  border-radius: 8px;
  opacity: 1;
  display: flex;
  align-items: center;
  padding: 20px 40px 20px 40px;
  background: #f7f9fc;
  margin-bottom: 20px;
}
.text {
  opacity: 1;
  font-family: Microsoft YaHei;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: 0em;
}

:deep(.arco-form-item) {
  margin-bottom: 0;
}
.fotter {
  height: 64px;
  // border: 1px solid #000;
  position: fixed;
  left: 220px;
  bottom: 0px;
  width: calc(100vw - 220px);
  color: white;
  text-align: center;
  padding: 10px;
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
}
</style>
